// 1. 全局引入Vue
import Vue from 'vue'
// 2. 整个项目全局样式重置(初始化)
import 'normalize.css/normalize.css'
// 3. 全局引入ElementUI
/*
 使用ElementUI组件库时, 有两种方案:
 1) 完整引入, 一次性把ElementUI中所有的组件导入项目
 2) 按需引入, 要用到什么组件然后再引入
 区别:
 1) 完整引入在打包时体积会比较大, 按需引入在打包时体积会比较小
 2) 完整引入相对于按需引入, 会稍微影响首屏渲染速度
 如何选择?
 1) 如果是ToC项目, 一般采用按需引入, 比如: 网站, 移动端项目
 2) 如果项目中用到的组件比较多, 基本用的七七八八, 就采用完整引入
 3) 如果是面向内部员工使用的管理系统, 统一采用完整引入即可, 功能是第一位, 体验是第二位
 */
import ElementUI from 'element-ui' // ElementUI插件, 内部集成了所有的Element组件
import 'element-ui/lib/theme-chalk/index.css' // ElementUI样式
import locale from 'element-ui/lib/locale/lang/en' // 英文语言包
// 4. 全局引入样式文件
// @别名, 指向项目的src目录
import '@/styles/index.scss' // global css

// 5. 全局引入页面入口文件
import App from './App'
// 6. 全局引入仓库系统
import store from './store'
// 7. 全局引入路由系统
import router from './router'
// 8. 全局引入字体文件
import '@/icons'
// 9. 全局引入权限控制文件
import '@/permission'

// 10. 全局注册ElementUI中的所有组件
// Vue.use(ElementUI, { locale })
// 如果想要中文版 element-ui，按如下方式声明
Vue.use(ElementUI)

// 11. 全局引入http方法挂载到原型对象中
// import http from '@/utils/request'
// Vue.prototype.$http = http

// 12. 全局注册指令
// 方式一: 一次性导入
// import '@/directives/index'

// 方式二: 按需导入
// import { imgerror, color } from '@/directives/index'
// Vue.directive('imgerror', imgerror)
// Vue.directive('color', color)

// -----思考: 每次都要来手动导入下, 很麻烦, 能不能自动处理----
// 前提是将所有的自定义指令都导入进来

// import * as directives from '@/directives'
// for (const key in directives) {
//   Vue.directive(key, directives[key])
// }

// 更加优雅, 扩展性更强的写法
import * as directives from '@/directives'
Object.keys(directives).forEach(key => {
  Vue.directive(key, directives[key])
})

// Vue.config.productionTip = false

// 测试打印环境变量中的值
// console.log(process.env.VUE_APP_BASE_API)
// console.log(process.env.port)
// console.log(process.env.VUE_APP_FLAG)

// 将App.vue根组件转化成DOM元素并渲染到指定挂载点(非常重要)
new Vue({
  el: '#app',
  router,
  store,
  // render: h => h(App)
  // -----------
  // render: function(createElement) {
  //   return createElement(App)
  // }
  // -----------
  // render(createElement) {
  //   return createElement(App)
  // }
  // -----------
  // render(h) {
  //   return h(App)
  // }
  // -----------
  render: h => h(App)
})
